<template>
        <div class="container pt-lg-md">
            <div class="row justify-content-center">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <div class="row justify-content-center mb-3">
                            <strong style="text-align:center">{{htitle}}</strong>
                        </div>
                        <div class="row justify-content-center">
                            <div class="col-md-6 justify-content-center">
                                <p style="text-align:center">
                                    {{hsize}}㎡ | {{hfloor}}层
                                </p>
                            </div>
                        </div>
                        <div class="row justify-content-center">
                            <div class="contentDiv">
                                <h5 style="color:orange">{{hrental}}元/</h5>
                                <h5 v-if="lors" style="color:orange">月</h5>
                                <h5 v-if="!lors" style="color:orange">日</h5>
                            </div>
                        </div>
                        <div class="row justify-content-center">
                            <div class="contentDiv">
                                <p>{{hendtime}}</p>
                            </div>
                        </div>
                        <div class="row justify-content-center mb-3">
                            <!-- 这两个需要做一个重叠，通过enable和disable来控制显示，这里先这么放便于阅读 -->
                            <div v-if="!paid">
                                <badge v-if="apply" type="warning">待审核</badge>
                                <badge v-if="pass" type="success">审核通过</badge>
                                <badge v-if="refuse" type="danger">审核失败</badge>
                                <badge type="warning" class="mr-2">未付款</badge>
                                <base-button v-if="pass && lors" @click="gotocontract" type="default">点此下载合同</base-button>
                                <base-button v-if="pass && !lors" @click="gotorent" type="primary">去付款</base-button>
                            </div>
                            <div v-if="paid">
                                <badge v-if="success" type="success">租赁成功</badge>
                                <badge v-if="renewal && lors" type="warning">去续租</badge>
                                <badge type="success" class="mr-2">已付款</badge>
                                <base-button  @click="gotofeedback" type="danger">有问题？去报修</base-button>
                            </div>
                        </div>
                        <hr>
                    </div>
                </div>
            </div>
        </div>
</template>
<script>
    import {getHomeInfo} from "../../api";

    export default {
        props: {
            // msg: {}
            msg:{
                endTime: String,
                status: String,
            }
        },
        data () {
            return {
                apply:false,
                pass:false,
                refuse:false,
                success:false,
                renewal:false,
                paid:false,
                lors:false,
                title:'',
                area:0,
                floor:0,
                rental:0
            }
        },
        computed:{
            hendtime(){
                return this.msg.endTime.substring(0,10);
            },
            htitle(){
                return this.title;
            },
            hsize(){
                return this.area;
            },
            hfloor(){
                return this.floor;
            },
            hrental(){
                return this.rental;
            }

        },
        created() {
            getHomeInfo(this.msg.hid).then(res=>{
                if(this.msg.status=='apply'){
                    this.apply=true;
                }
                if(this.msg.status=='refuse'){
                    this.refuse=true;
                }
                if(this.msg.status=='pass'){
                    this.pass=true;
                }
                if(this.msg.status=='success'){
                    this.success=true;
                    this.paid=true;
                }
                if(this.msg.status=='renewal'){
                    this.renewal=true;
                    this.paid=true;
                }
                if(res.data.rentalmethod==='shortr'){
                    this.lors=false;
                }
                if(res.data.rentalmethod==='longr'){
                    this.lors=true;
                }
                //console.log(res.data);
                this.title=res.data.title;
                this.area=res.data.area;
                this.floor=res.data.floor;
                this.rental=res.data.price;
            })
        },
         methods: {
            gotofeedback(){
                this.$router.push({name: 'feedback', params: {'id': this.msg.id}});
            },
            gotorent(){
                this.$router.push({name: 'rent', params: {'id': this.msg.id}});
            },
            gotocontract(){
                this.$router.push({name: 'contract', params: {'id': this.msg.id}});
            }
        }
    }
</script>

<style>
    .contentDiv{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        margin: auto;
    }
</style>